<template>
  <div class="dy-main AccountWriteOff">
    <div class="dy-header">
      <x-header title="注销手机银行" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <group gutter="0.05rem">
        <x-input title="手机号码" v-model="mobilNum" placeholder="请输入手机号码" label-width="2.05rem" class="cell slot-bright"></x-input>
        <cell title="证件类型" is-link :value="IDType" @click.native="selectIDType" label-width="2.05rem" class="cell slot-bright">
        </cell>
        <x-input title="证件号码" placeholder="请输入证件号码" label-width="2.05rem" class="cell" v-model="IDNo"><img class="imgCamera" slot="right" src="../../assets/img/Account/camera.png" alt="" ></x-input>
        <x-input title="短信验证码" class="cell weui-vcode" v-model="smsCode" placeholder="请输入验证码" label-width="2.05rem" :show-clear="false" :min="6" :max="6" @on-change="testYzm">
          <a slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
        </x-input>
        <!--<x-input title="短信验证码" label-width="2.05rem" class="cell" v-model="smsCode" placeholder="请输入短信验证码">-->
          <!--<a slot="right" class="check-button">发送验证码</a>-->
        <!--</x-input>-->
      </group>
      <actionsheet v-model="creSwitch" :menus="menus" @on-click-menu="click" ></actionsheet>
      <zx-dialog v-model="tipsShow" type="tips" butType="choose" :data="['取消', '确认']" @on-click-no="clickNo" @on-click-yes="clickYes">
        <div slot="body" class="tips" style="text-align: center">
          是否注销此账户
        </div>
      </zx-dialog>
      <toast v-model="showPositionValue" class="toastContent" type="text"><icon :type="status?'success':'warn'" time="100000" width=".32rem"></icon><span v-html= "this.status?'注销成功':'注销失败'"></span></toast>
      <x-button type="warn" class="confirm" ction-type="button" @click.native="goNext">注销</x-button>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
import { Actionsheet, Toast, Icon } from 'vux'
export default{
  components: {
    Actionsheet,
    Toast,
    Icon
  },
  data () {
    return {
      mobilNum: '',
      IDType: '身份证',
      IDNo: '', // 证件号码
      creSwitch: false,
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      menus: {
        menu1: '身份证',
        menu2: '军官证',
        menu3: '港澳台证',
        menu4: '护照',
        menu5: '临时身份证'
      },
      smsCode: '', // 短信验证码
      showPositionValue: false, // 绑定toast
      status: 1, // 交互结果 1成功 2失败
      tipsShow: false // 确认弹框
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    selectIDType () {
      this.creSwitch = !this.creSwitch
    },
    click (key, item) {
      this.IDType = item
    },
    goNext () {
      this.tipsShow = true
    },
    clickNo () {
      this.tipsShow = false
    },
    clickYes () {
      let _this = this
      this.tipsShow = false
      _this.$router.push({'name': 'AccountWriteOffSuccess'})
      //  this.$bridge.callhandler('nativeRequest',
      //    JSON.stringify({
      //      'requstSource': 'internetRequest',
      //      'url': 'mstep.do?act=business',
      //      'params': {'method_Name': 'CI005002', 'user_Data': { cardNo: _this.cardNo, cardholder: _this.cardholder, IDType: _this.IDType, IDNo: _this.IDNo, payPwd: _this.payPwd, smsCode: _this.smsCode }}
      //    }),
      //    function (response) {
      //      response = JSON.parse(response)
      //      if (response.status === 0 || response.status === '0') {
      //        let returnData = response.data.data[0]
      //        if (returnData.status === '成功') {
      //          // _this.showPositionValue = true
      //          // _this.status = 1
      //          _this.$router.push({'name': 'AccountWriteOffSuccess'})
      //        } else {
      //          // todo 失败的展示
      //          _this.showPositionValue = true
      //          _this.status = 0
      //        }
      //      } else {
      //        console.log('fail')
      //      }
      //    })
    },

    testYzm () {
      // todo
    },
    /*
    *  验证码发送
    */
    postCode () {
      let lVue = this
      lVue.codeText = (lVue.codeTime + 's后可重新发送')
      if (!lVue.isTime) {
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '发送验证码'
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 10
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新发送'
        }, 1000)
      }
      lVue.disableCode = true
    }
  }
}
</script>
<style lang="less">
  .AccountWriteOff {
    .dy-body {
      .confirm{
        background-color: #ec1b30;
        width: 6.9rem;
        height: .88rem;
        margin-top: .64rem;
        font-size: .34rem;
      }
      .imgCamera{
        width:.42rem;
        height: .42rem;
        margin-left: .24rem;
        vertical-align: middle;
      }
    }
  }
</style>
